<!--
跟 Vue 说 Hello World！
-->
<script setup lang="ts">
import { ref } from "vue";

// “ref”是用来存储值的响应式数据源。
// 理论上我们在展示该字符串的时候不需要将其包装在 ref() 中，
// 但是在下一个示例中更改这个值的时候，我们就需要它了。
const message = ref("Hello World!");

function reverseMessage() {
    message.value = message.value.split("").reverse().join("");
}
</script>

<template>
    <h1>{{ message }}</h1>
    <!--
    绑定到一个方法/函数。
    这个 @click 语法是 v-on:click 的简写。
  -->
    <button @click="reverseMessage">Reverse Message</button>
</template>

<style scoped>
h1 {
    color: rgb(255, 0, 0);
}
</style>
